<template>
	<view>
		<uni-popup
			ref="dateselect"
			@maskClick="closePopup()"
			catchtouchmove="true"
		>
			<view class="popup-bd">
				<view class="popup-title mt20">
					选择周期
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<view class="popup-content">
					<view class="tab-line1">
						<scroll-view
							scroll-x="true"
							:scroll-into-view="scrollIndex"
							scroll-with-animation="true"
							class="tab-bar1"
						>
							<view
								class="tab-item1"
								:class="
									item === activeYear ? 'tab-active fwb' : ''
								"
								v-for="item in dataList"
								:key="item"
								:id="'scroll' + item"
								@click="changeYear(item)"
							>
								<view class="f36">{{ item }}年</view>
								<view
									:class="{
										'tab-active-line': item == activeYear,
									}"
									class="mt20"
								></view>
							</view>
						</scroll-view>
					</view>
					<!-- 时间段 -->
					<view class="box-bd-cont mt20 df fx-wp">
						<view
							class="item-box mb20"
							v-for="(item, index) in monthList"
							:key="index"
						>
							<view
								:class="{
									'time-active': item === monthActive,
								}"
								class="item-cont"
								@tap="changeMonth(item, index)"
							>
								{{ item }}月
							</view>
						</view>
					</view>
				</view>
				<view class="popup-bottom df ac"
					><button
						class="primary-button linear w90"
						@tap="submitChooseDate()"
					>
						确定
					</button></view
				>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getCurrentDay } from '@/common/utils.js'
import { nextTick } from 'vue'
export default {
	name: 'select-month',
	emits: ['submit'],
	props: {
		value: {
			type: Array,
			value: [],
			default() {
				return []
			},
		},
		//最小年份
		minYear: {
			type: [Number, String],
			default: '',
		},
		//最大年份
		maxYear: {
			type: [Number, String],
			default: '',
		},
		orderData: {
			type: Object,
			default: () => {
				return {}
			},
		},
		//往前几年
		befor: {
			type: [Number, String],
			default: 1,
		},
		//往后几年
		after: {
			type: [Number, String],
			default: 1,
		},
	},
	data() {
		return {
			dataList: [],
			activeYear: this.value[0] || new Date().getFullYear(),
			monthList: [],
			monthActive: this.value[1] || new Date().getMonth() + 1,
			scrollIndex: '',
			yearBefor: 1,
			yearAfter: 1,
		}
	},
	methods: {
		init() {
			this.initData()
			this.$refs.dateselect.open('bottom')
		},
		changeYear(val) {
			this.activeYear = val
			this.scrollIndex = 'scroll' + val
		},
		changeMonth(month, index) {
			this.monthActive = month
		},
		getTimeSlot() {
			let month = 12
			this.monthList = []
			for (let i = 1; i <= month; i++) {
				this.monthList.push(i)
			}
		},
		//根据月份获取天数和对应的星期
		monthDays() {
			let _that = this
			let dateObj = new Date()
			let nowYear = dateObj.getFullYear()
			let minYear = nowYear - this.yearBefor
			let maxYear = nowYear + this.yearAfter
			this.dataList = []
			for (let i = 0; i < maxYear - minYear + 1; i++) {
				this.dataList.push(minYear + i)
			}
		},
		closePopup() {
			this.$refs.dateselect.close()
		},
		submitChooseDate() {
			this.closePopup()
			this.$emit('submit', [this.activeYear, this.monthActive])
		},
		//初始化数据
		initData() {
			this.yearBefor = parseInt(this.befor)
			this.yearAfter = parseInt(this.after)
			this.activeYear = this.value[0] || new Date().getFullYear()
			this.monthActive = this.value[1] || new Date().getMonth() + 1
			this.monthDays()
			this.getTimeSlot()
			this.scrollIndex = ''
			this.$nextTick(() => {
				this.scrollIndex = 'scroll' + this.activeYear
			})
		},
	},
}
</script>

<style scoped lang="scss">
.tab-line1 {
	height: 96rpx;
	line-height: 90rpx;
	overflow: hidden;
	width: 100%;
}
.tab-bar1 {
	width: 100%;
	box-sizing: content-box;
	height: 90rpx;
	position: relative;
	background-color: #ffffff;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	user-select: none;
	padding-bottom: 30rpx;
	white-space: nowrap;
}
.tab-item1 {
	display: inline-block;
	position: relative;
	text-align: center;
	font-size: 36rpx;
	color: #6b686b;
	padding: 0 20rpx;
}
.tab-active {
	color: #409eff;
}
.item-box {
	width: 33%;
	height: 109rpx;
}
.item-cont {
	height: 109rpx;
	line-height: 109rpx;
	font-size: 32rpx;
	border: 1rpx solid $tag-color;
	text-align: center;
	margin: 8rpx;
	border-radius: 10rpx;
	color: $tag-color;
}
.box-bd-cont {
	background-color: #ffffff;
	width: 100%;
	height: calc(100vh - 520rpx);
	overflow-y: auto;
	align-content: flex-start;
}
.time-active {
	border-color: $active-color;
	background: $back-color;
	color: $active-color;
}
.time-disabled {
	background-color: #fafafa;
	color: #999999;
}
.tab-active-line {
	width: 80%;
	height: 6rpx;
	background-color: #4782fb;
	color: #4782fb;
}
.tab-active {
	font-weight: bold;
}
.popup-title {
	background: linear-gradient(90deg, #e3edff 0%, rgba(223, 234, 255, 0) 100%);
}
</style>
